<template>
  <div class="my">
    <div class="my_bg">
      <div style="text-align: center;margin-top: 25px;font-size: 24px">
        {{ $productName }}
      </div>
      <div class="content">
        <img class="img" src="../../assets/my/personal_icon.png">
        <span class="phone_text">ID:{{ phone }}</span>
      </div>
    </div>
    <div class="order_box">
      <div class="phone_box_item" @click="$router.push('/zlgnDYovQNn')" v-if="isLogin">
          <img class="phone_box_img" src="../../assets/my/my_icon_order.png">
        <span style="vertical-align: middle"> {{ $t('历史订单') }}</span>
      </div>
      <div class="phone_box_item" v-if="isLogin" @click="$router.push('/ZMyMfdSBUti')">
          <img class="phone_box_img" src="../../assets/my/my_icon_card.png">
        <span style="vertical-align: middle"> {{ $t('我的银行卡') }}</span>
      </div>
    </div>
    <div class="wrapper">

      <div class="menu_list" >
        <div class="content_item">
          <div class="content_box_item" @click="handleContact">
            <img class="icon" src="../../assets/my/my_contact.png">
            <div class="col">
              <div class="text">{{ $t('联系我们') }}</div>
            </div>
          </div>
          <div class="content_box_item" v-if="isLogin" @click="$router.push('/zMsSEHQAzer')">
            <img class="icon" src="../../assets/my/my_icon_feedback.png">
            <div class="col">
              <div class="text">{{ $t('问题或建议') }}</div>
            </div>
          </div>
          <div class="content_box_item" @click="serveContentShow = true">
            <img class="icon" src="../../assets/my/my_icon_agreement.png">
            <div class="col" >
              <div class="text">{{ $t('隐私协议') }}</div>
            </div>
          </div>
          <div class="content_box_item" v-show="isLogin" @click="$router.push('/QoEpUoutegv')">
            <img class="icon" src="../../assets/my/my_icon_cancel.png">
            <div class="col">
              <div class="text">{{ $t('账号注销') }}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="padding: 15px 0;text-align: center">
        <van-button  @click="onLoginOut" round style="border: 1px solid #15B3B2;color: #15B3B2;font-size: 18px;padding: 15px 30px"  >
          {{ $t('退出登录') }}
        </van-button>
      </div>
      <div class="flex_version">Version number {{ getVersion() }}</div>
    </div>
    <van-popup v-model:show="serveContentShow" position="bottom" :style="{ height: '80%' }" closeable
               close-icon="close">
      <div
          style="width: 100%;height: 100%;padding: 50px 10px 20px 10px;background-color: #FFFFFF;box-sizing: border-box">
        <iframe style="width: 100%;height: 100%;background-color: #FFFFFF; border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;" src="https://www.cashbilis.top/cash_mabilis_policy.html"></iframe>
      </div>
    </van-popup>
    <van-popup v-model:show="contactShow">
      <template #default>
        <div class="dialog_body">
          <div class="contact_box">
            <p>{{ $t('联系电话') }}：</p>
            <div><span style="color: #FF7805"
                       @click="copyValue(contactData.servicePhone)">{{ contactData.servicePhone }}</span></div>
            <p>{{ $t('邮箱') }}：</p>
            <div><span style="color: #FF7805" @click="copyValue(contactData.mail)">{{ contactData.mail }}</span></div>
          </div>
          <div style="padding-top: 20px">
            <van-button type="primary" style="font-size: 20px" @click="contactShow = false">{{ $t('关闭') }}
            </van-button>
          </div>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import {computed, onMounted, ref} from 'vue'
import router from "@/router";
import {useStore} from "vuex";
import {Dialog, Toast} from "vant";
import {loginOut, fetchAboutInfo} from "@/api/my";
import {useI18n} from 'vue-i18n'

export default {
  setup() {
    const phone = computed(() => {
      return localStorage.getItem('phone')
    })
    const contactShow = ref(false)
    const contactData = ref({})
    const {t} = useI18n()
    const store = useStore()
    const serveContentShow = ref(false)
    const isLogin = ref(localStorage.getItem('userId'))
    const getVersion = function () {
      let version = '1.0.1'
      if (window.android && window.android.getAppVersion) {
        version = window.android.getAppVersion()
      }
      return version
    }
    const onLoginOut = async () => {
      Dialog.confirm({
        message: t('确认退出账号'),
      }).then(async () => {
        const res = await loginOut()
        if (res.code === 1) {
          const indexArr = ['phone', 'userId', 'loanInfo', 'token', 'userWriteInfo', 'userInfoVerify', 'orderId', 'homeProductList', 'loanInfo', 'productInfo']
          indexArr.forEach(item => {
            localStorage.removeItem(item)
          })
          if (window.android) {
            window.android.exitAccount(true)
          }
          router.replace('/JFLAWJLfjkw')
        }
      }).catch(() => {
      });
    }

    async function handleContact() {
      router.push('/rKUgDjpinxU')
    }

    function copyValue(text) {
      if (text) {
        let input = document.createElement("input");
        input.value = text
        document.body.appendChild(input);
        input.select()
        document.execCommand('copy')
        Toast({
          message: t('复制成功')
        })
        document.body.removeChild(input);
      }
    }

    onMounted(() => {
      store.dispatch('changeLoading', false)

    })
    return {
      serveContentShow,
      copyValue,
      contactShow,
      contactData,
      getVersion,
      handleContact,
      phone,
      onLoginOut,
      isLogin,
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.my_bg {
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-size: 100% 100%;
  height: 220px;
  background-image: url("../../assets/login_bg.png");
  color: #FFFFFF;
  font-size: 24px;

  .content {
    position: relative;
    margin-top: 30px;
    padding: 0 20px;

    .img {
      height: 50px;
      width: 50px;
      vertical-align: middle;
      margin-right: 15px;
    }

    .phone {
      vertical-align: middle;
      padding: 0 15px;
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      text-align: center;
      padding-top: 40px;

      .phone_text {
        font-size: 20px;
      }

    }
  }
}

.wrapper {
}

.order_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  grid-gap: 5%;
  padding: 0 10px;
  margin-top: -50px;

  .phone_box_item {
    font-size: 14px;
    border-radius: 10px;
    padding: 15px 10px;
    background: linear-gradient(to right, #BEFDFD 0%, #FFFFFF 100%);
    box-shadow: 0px 4px 4px 0px rgba(102, 102, 102, 0.3);
  }

  .phone_box_img {
    vertical-align: middle;
    height: 32px;
    width: 32px;
    margin-right: 5px;
  }
}

.contact_box {
  font-size: 15px;
  padding: 10px 0;
  font-weight: 600;
  text-align: left;
  word-wrap: break-word;
}


.bg_mt {
  background-color: #FFFFFF;
  margin-top: -100px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

}

.menu_list {
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
  margin-top: 20px;
  padding: 0 10px;
}

.content_item {
  box-sizing: border-box;
  box-shadow: 0px 4px 4px 0px rgba(102,102,102,0.3);
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3%;
}

.content_box_item {
  width: 100%;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 6px;
  padding: 10px 0;
}

.content_box_item .col {
  background-color: #fff;
  text-align: center;
}

.content_box_item .icon {
  padding: 0 5px;
  height: 32px;
  width: 32px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.content_box_item .text {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.content_box_item .col .right img {
  width: 11px;
  height: 16px;
  float: right
}

.flex_version {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 14px;
  color: #999999;
  bottom: 70px;
  text-align: center;
}
</style>
